<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Neumorphism Keyboard</title>
		<link rel="stylesheet" href="./keyboard.css" />
	</head>
	<body>
		<div>
		  <ul class="keys">
		    <li id="grey">💀</li>
		    <li>1</li>
		    <li>2</li>
		    <li>3</li>
		    <li>4</li>
		    <li>5</li>
		    <li>6</li>
		    <li>7</li>
		    <li>7</li>
		    <li>8</li>
		    <li>0</li>
		    <li>_</li>
		    <li> =</li>
		    <li id="yellow">🎨</li>
		  </ul>
		  <ul class="keys">
		    <li id="red">🌵</li>
		    <li id="Q">Q</li>
		    <li id="W">W</li>
		    <li id="E">E</li>
		    <li id="R">R</li>
		    <li id="T">T</li>
		    <li id="Y">Y</li>
		    <li id="U">U</li>
		    <li id="I">I</li>
		    <li id="O">O</li>
		    <li id="P">P</li>
		    <li>[</li>
		    <li>]</li>
		    <li>\</li>
		  </ul>
		  <ul class="keys">
		    <li id="blue">🧢</li>
		    <li>A</li>
		    <li>S</li>
		    <li>D</li>
		    <li>F</li>
		    <li>G</li>
		    <li>H</li>
		    <li>J</li>
		    <li>K</li>
		    <li>L</li>
		    <li>;</li>
		    <li>""</li>
		    <li id="green">🔫</li>
		  </ul>
		  <ul class="keys">
		    <li id="rebeca">🔥</li>
		    <li>Z</li>
		    <li>X</li>
		    <li>C</li>
		    <li>V</li>
		    <li>B</li>
		    <li>N</li>
		    <li>M</li>
		    <li>,</li>
		    <li>.</li>
		    <li>?</li>
		    <li id="up">🧬</li>
		  </ul>
		   <ul class="keys">
		    <li id="one">ctrl</li>
		    <li id="one">alt</li>
		    <li id="one">cmd</li>
		    <li id="two"></li>
		    <li id="one">cmd</li>
		    <li id="one">alt</li>
		  </ul>
		</div>
	</body>
</html>